<template>
  <div>
    <Row :gutter="24">
      <Col span="8">
        <Row>
          <div class="ddo">
            <Col span="12">
                  <span class="dd01">设备数据</span>
            </Col>
            <Col span="12">
              <Input v-model="filterName" placeholder="过滤内容...." class="myInput"/>
            </Col>
          </div>
        </Row>
        <Row>
          <div class="dd02">
            <Col span="24" class="hjd" v-for="(dev, index) in getDeviceDatas" :key="index"
                 @click.native="select(dev, index)" :class="{itemSelect : clickIndex == index}">{{dev.name}}</Col>
          </div>
        </Row>
      </Col>
      <Col span="14">
        <Row>
          <div class="ddo">
            <Col span="24">
              <span class="dd01">设备属性选择</span>
            </Col>
          </div>
        </Row>
        <Row>
          <div class="dd06">
            <Select v-model="devPros" multiple>
              <Option v-for="item in properties" :value="item.name+'-'+ item.propertyType" :key="item.id">{{item.name }}</Option>
            </Select>
          </div>
        </Row>
        <Row class="dfdx">
          <Button size="small" icon="md-arrow-round-down" type="primary" long style="width: 200px;"
                  @click.native="addToData" :disabled="devPros.length == 0">添加
          </Button>
        </Row>
        <Row style="margin-bottom: 30px;">
            <!--已选数据  -->
          <Table height="380" border :columns="selectColumns" :data="resutPool" no-data-text="未选属性"></Table>
        </Row>
        <Row>
          <!--保存数据区域-->
          <div class="ddo">
            <Col span="24">
              <span class="dd01">保存组态数据</span>
            </Col>
          </div>
        </Row>
        <Row>
          <div class="dd06" style="text-align: center">
            <Input v-model="labelName" placeholder="组态设备名称..." style="margin-bottom: 10px"/>
            <Input v-model="labenUUid" placeholder="组态设备id (不填后台生成)..." style="margin-bottom: 10px"/>
            <Button size="large" icon="md-checkmark" type="success" long style="width: 200px;"
                    @click.native="saveToDb" :disabled="resutPool.length == 0 || labelName==''"
                    :loading="saveLoading">保存数据
            </Button>
          </div>
        </Row>
      </Col>
    </Row>
    <Drawer :title="'添加【'+editAlaisObj.devName+'】属性别名'" placement="right" :closable="false" v-model="alaisDrawer"
            width="350"
            @on-close="cleanDrawer">
      <Input v-model="item.alias" v-for="(item, index) in editAlaisObj.oriArr" :key="index" style="margin-top: 5px;">
        <span slot="prepend">{{item.ori}}</span>
      </Input>

      <Row style="text-align: right;padding-top: 20px;">
        <Button size="small" icon="md-checkmark" type="success" long style="width: 200px;"
                @click.native="saveEditAlias">保存
        </Button>
      </Row>
    </Drawer>
  </div>
</template>

<script>
  export default {
    name: 'SelectPanel',
    props: [],
    mounted: function () {
    },
    data () {
      return {
        datas: [],
        saveLoading: false,
        alaisDrawer: false,
        editAlaisObj: {},
        filterName: '',
        clickIndex: 0,
        devPros: [],
        labelName: '',
        labenUUid: '',
        selectColumns: [{
          title: '设备',
          key: 'devName',
          width: 150,
          fixed: 'left',
          align: 'center'
        },
          {
            title: '已选属性',
            key: 'properties',
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            align: 'center',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    'marginRight': '3px'
                  },
                  on: {
                    click: () => {
                      this.resutPool.splice(params.index, 1)
                    }
                  }
                }, '删除'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editAlaisObj = params.row
                      this.editAlaisObj.oriArr = this.editAlaisObj.properties.split('_').map(item => {
                        let doSplit = item.split('|')
                        return {ori: doSplit[0], alias: doSplit.length > 1 ? doSplit[1] : ''}
                      })
                      this.alaisDrawer = true
                    }
                  }
                }, '别名')
              ])
            }
          }],
        resutPool: [], // 最终保存结果数据
        curItem: {},
        properties: []
      }
    },
    methods: {
      select (item, index) {
        if (this.curItem.id !== item.id) {
        this.clickIndex = index
        this.curItem = item
        // 属性选项
        this.properties = item.iotDevType.iotCollItems
        // 清除
        this.devPros = []
        }
      },
      cleanDrawer: function () {
        this.editAlaisObj = {}
      },
      saveEditAlias () {
        this.resutPool[this.editAlaisObj._index].properties = this.editAlaisObj.oriArr.map(item => {
          return item.ori + (item.alias !== '' ? ('|' + item.alias) : '')
        }).join('_')

        this.alaisDrawer = false
        this.cleanDrawer()
      },
      addToData () {
        if (this.devPros.length === 0) {
          this.$Message.info('未选择属性')
          return
        }

        let newObj = {
          devId: this.curItem.id,
          devName: this.curItem.name,
          properties: this.devPros.join('_')
        }

        this.resutPool.push(newObj)
        // 加完后，清空
        this.devPros = []
        console.log('选中的数据：', newObj)
      },
      saveToDb () {
        // 保存数据 this.saveLoading = true
        this.resutPool = this.resutPool.map(item => {
          item.label = this.labelName
          if (this.labenUUid !== '') {
            item.uuid = this.labenUUid
          }
          return item
        })
        console.log('this.saveObj', this.resutPool)

        this.saveLoading = true
        window.myapi.post_json('condev/slist', this.resutPool).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.info({
              title: '提示',
              desc: '操作成功，刷新数据!'
            })
            this.tellRefresh()
          } else {
            this.$Notice.info({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
        }).finally(() => {
          this.saveLoading = false
        })
      },
      tellRefresh () {
        // 清空自己
        this.resutPool = []
        this.devPros = []
        this.$emit('tell-refresh')
      }
    },
    computed: {
      getDeviceDatas () {
        if (this.datas.length === 0) {
          window.myapi.dev_list({size: 99999999}).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              this.datas = resp.data.data.content
            }
          }).finally(() => {
            return this.datas
          })
        } else {
          this.clickIndex = 0
          if (this.filterName === '') {
            if (this.datas[0]) {
              this.properties = this.datas[0].iotDevType.iotCollItems
              this.curItem = this.datas[0]
            }
          } else {
            let result = this.datas.filter(item => {
              if (item.name.indexOf(this.filterName) > -1) {
                return item
              }
            })
            if (result.length > 0) {
              this.properties = result[0].iotDevType.iotCollItems
              this.curItem = result[0]
            }
            return result
          }
        }
        return this.datas
      }
    }
  }
</script>

<style scoped>
.ddo {
  width: 100%;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  background-color: #f8f8f9;
  border: 1px solid #e8eaec;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 0px 10px;
}
  .dd01{
    line-height: 40px;
    height: 40px;
    font-size: 14px;
  }
  .myInput{
    height: 34px;
    line-height: 40px;
  }
  .dd02{
    width: 100%;
    min-height: 815px;
    max-height: 815px;
    overflow-y: auto;
    border-bottom: 1px solid #e8eaec;
    border-left: 1px solid #e8eaec;
    border-right: 1px solid #e8eaec;
    background: #ffffff;
    font-size: 13px;
  }

  .hjd{
    padding: 5px 10px;
    border-bottom: 1px solid #e8eaec;
    color: #434343;
  }

.hjd:hover {
  background: #ececec;
  cursor: pointer;
}
  .itemSelect{
  background: #ececec;
  }

.dd06 {
  width: 100%;
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
  border-bottom: 1px solid #e8eaec;
  border-left: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec;
  background: #ffffff;
  font-size: 14px;
  padding: 10px;
}

  .dfdx{
    text-align: center;
    margin: 20px 0px;
  }
</style>
